<style>
    .my-publish-list {
        border-bottom: .25rem solid #f3f3f3;
    }

    .wallet-list {
        overflow: auto;
        height: 28rem;
        padding-bottom: 2rem;
        -webkit-overflow-scrolling : touch;
    }
    .service-fixed-wrap {
        padding: .5rem;
        background: #f3f3f3;
        border-radius: 50%;
        position: fixed;
        right: 1rem;
        bottom: 2rem;
    }
    .service-btn {
        width: 1rem;
        height: 1rem;
        display: block;
    }
</style>
<div class="find-app" id="app">
    <!-- public-head -->
    <div class="header-mobile">
        <a class="nav-back" href="javascript:history.go(-1)">
            <img class="icon" src="__CDN__/assets/img/return@2x.png" alt="">
        </a>
        <h1 class="nav-title">我参与的</h1>
    </div>
    <!-- main -->
    <div class="main-wrapper">
        <!-- join-wrapper -->
        <div class="join-wrapper">
            <!-- floor-two -->
            <div class="section-floor">
                <div class="publish-wrapper">
                    <div class="publish-category">
                        <div :class="postData.type === 1?'cur':''" class="category-item"><a class="href-cover"
                                @click="navChange(1)">我参与的</a></div>
                        <div :class="postData.type === 2?'cur':''" class="category-item"><a class="href-cover"
                                @click="navChange(2)">我找到的</a></div>
                    </div>
                    <div class="wallet-list">
                        <mt-loadmore ref="loadmore" :bottom-method="loadBottom" :auto-fill="nofill"
                            @bottom-status-change="handleBottomChange">
                            <div class="my-publish-list" v-for="(item,index) in list" :key='index'>
                                <div class="list-item">
                                    <div class="head">
                                        <a :href="item.url" class="user-info">
                                            <img class="avatar" v-lazy="item.user.avatar">
                                            <div>
                                                <p class="name">{{item.user.nickname}}</p>
                                                <p class="time">{{item.createtime}}</p>
                                            </div>
                                        </a>
                                        <a class="link-btn" :href="item.chat_url">联系Ta</a>
                                    </div>
                                    <div class="body">
                                        <a :href="item.url" class="href-cover">
                                            <div class="info-bar">
                                                <span class="label">{{item.label}}</span>
                                                {{item.content}}
                                            </div>
                                            <div class="gallery-bar">
                                                <div v-for="(subitem,subindex) in item.imageslist" :key="subindex"
                                                    class="gallery-item">
                                                    <img class="img" v-lazy="subitem" alt="">
                                                </div>
                                            </div>
                                            <div class="location-bar">
                                                <div>
                                                    <img class="icon" src="__CDN__/assets/img/icon-map@2x.png" alt="">
                                                    <span>{{item.detailedaddress}}</span>
                                                </div>
                                                <div>
                                                    <span>浏览 {{item.browse}}</span>
                                                </div>
                                            </div>
                                        </a>
                                        <div class="reward-bar">
                                            <div class="inner">
                                                <span class="reward">{{item.q_name}}</span>
                                                <span class="symbol">￥</span>
                                                <span class="price">{{item.money}}</span>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- 进行中 -->

                                    <div v-if="item.eurekaimageslist" class="confirm-wrapper">
                                    <div class="confirm-list">
                                    <div class="list-item">
                                    <div class="head">
                                    <div class="user-info">
                                    <div>
                                    <p v-if="item.status < 2" class="name">{{item.q_name}}</p>
                                    </div>
                                    </div>
                                    </div>
                                    <div class="body" v-if="postData.type == 2">
                                    <div class="info-bar">
                                    {{item.eurekaContent}}
                                    </div>
                                    <div class="gallery-bar">
                                    <div v-for="(subitem,subindex) in item.eurekaimageslist"
                                    :key="subindex" class="gallery-item">
                                    <img class="img" v-lazy="subitem" alt="">
                                    </div>
                                    </div>
                                    </div>
                                    </div>
                                    </div>
                                    </div>
                                </div>
                            </div>
                        </mt-loadmore>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- public-toast 弹窗在这里，自己修改参数就可以了 -->
    <div v-if="shareToast.show" class="mask-mobile" @click.self="shareToast.show = false">
        <div class="toast-mobile">
            <div class="toast-wrapper">
                <div class="toast-head">
                    <h1 class="title">分享</h1>
                    <div class="main">
                        <p class="txt">1、有赏爱心传递，预计可赚￥{{shareToastData.share}}</p>
                        <p class="txt">2、邀请好友成功分享后，您可获得好友佣 金的{{shareToastData.employe}}%</p>
                    </div>
                </div>
                <div class="toast-footer">
                    <div class="btn invite-btn" @click="friends()">取消</div>
                    <div class="btn share-btn" @click="circle()">分享</div>
                </div>
            </div>
        </div>
    </div>
    <!-- service -->
    <div v-if="service" class="mask-mobile" @click.self="service = false">
            <div class="toast-mobile">
                <div class="toast-wrapper">
                    <div class="toast-head">
                        <h1 class="title">温馨提示</h1>
                        <div class="main">
                            <p class="txt">请关注微信公众号“一起帮爱心传递”，回复您想要咨询的问题。</p>
                        </div>
                    </div>
                    <div class="toast-footer">
                        <div class="btn invite-btn" @click="service = false">取消</div>
                        <div class="btn share-btn" @click="service = false">确定</div>
                    </div>
                </div>
            </div>
        </div>
    <div class="service-fixed-wrap" @click="service= true">
        <img class="service-btn" src="__CDN__/assets/img/service.png" alt="">
    </div>
    <!-- public_share -->
    <div v-if="shareFirend" class="mask-share-friend">
        <div class="btn-wrapper"><img @click.self="shareFirend = false" class="share-fiend-btn"
                src="__CDN__/assets/img/share_close.png" /><img class="share-fiend-btn"
                src="__CDN__/assets/img/share_firend.png" alt=""></div>
        <div class="tip">
            <p>请点击右上角</p>
            <p>通过【发送给朋友】或【分享到朋友圈】</p>
            <p>将有赏爱心传递下去</p>
        </div>
    </div>
</div>

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js" type="text/javascript" charset="utf-8"></script>

<script>
    wx.config(<?php echo $js->config(array('onMenuShareAppMessage','onMenuShareTimeline','getLocation'), false) ?>);
    let index = new Vue({
        el: '#app',
        data: {
            service: false,
            list: [],
            postData: {
                page: 1,
                limit: 10,
                RequestName: 1,
                type: 1
            },
            shareToast: {
                show: false,
            },
            shareToastData: [],
            shareFirend: false,
            shareid: 0,
            // 控制载入状态
            loading: false,
            bottomStatus: '',
            nofill:false
        },
        created() {
            this.ajax()
        },
        mounted() {
        },
        methods: {
            // 上拉加载事件
            loadBottom() {
                this.ajax()
            },
            // 触底事件
            handleBottomChange(status) {
                this.bottomStatus = status;
            },
            navChange(type) {
                this.postData.page = 1
                this.postData.RequestName = type
                this.postData.type = type
                this.ajax();
            },
            ajax() {
                let self = this
                this.loading = true
                axios({
                    method: "post",
                    url: "{:url('user/participate')}",
                    data: self.postData,
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                }).then(res => {
                    if (self.postData.page == 1) {
                        self.list = [];
                    }
                    if (res.data.code == 1) {
                        console.log(res.data.data.length)
                        if (res.data.data.length === 0) {
                            self.$messagebox(res.data.msg)
                        } else {
                            self.list = self.list.concat(res.data.data)
                            self.postData.page++
                            self.loading = false
                        }
                    }
                    self.$refs.loadmore.onBottomLoaded();
                })
            },
            share(id) {
                let self = this;
                self.shareid
                axios({
                    method: "post",
                    url: "{:url('index/getShareLink')}",
                    data: {
                        something_id: id
                    },
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                }).then(res => {

                    if (res.data.code === 1) {
                        self.shareToastData = res.data.data
                        self.shareToast.show = true

                    } else {}
                });
            },
            friends() {
                this.shareToast.show = false
            },
            circle() {
                this.shareToast.show = false
                this.shareFirend = true

                console.log(this.shareFirend)
                let self = this
                wx.onMenuShareTimeline({
                    title: self.shareToastData.title,
                    link: self.shareToastData.link,
                    imgUrl: self.shareToastData.imgUrl,
                    // imgUrl: 'http://demo.open.weixin.qq.com/jssdk/images/p2166127561.jpg',
                    trigger: function (res) {
                        // 不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回
                        // alert('用户点击分享到朋友圈');
                    },
                    success: function (res) {
                        axios({
                            method: "post",
                            url: "{:url('index/index')}",
                            data: {
                                RequestName: 'share',
                                something_id: self.shareid
                            },
                            headers: {
                                'X-Requested-With': 'XMLHttpRequest'
                            }
                        }).then(res => {
                            console.log(res)
                            if (res.data.code === 1) {
                                self.field.picturs.push(res.data.data.url)
                            }
                        })
                        self.$messagebox("已分享")

                    },
                    cancel: function (res) {
                        alert('已取消');
                    },
                    fail: function (res) {
                        alert(JSON.stringify(res));
                    }
                });

                wx.onMenuShareAppMessage({
                    title: this.shareToastData.title,
                    desc: this.shareToastData.desc,
                    link: this.shareToastData.link,
                    imgUrl: self.shareToastData.imgUrl,
                    // imgUrl: 'http://demo.open.weixin.qq.com/jssdk/images/p2166127561.jpg',
                    trigger: function (res) {
                        // 不要尝试在trigger中使用ajax异步请求修改本次分享的内容
                    },
                    success: function (res) {
                        axios({
                            method: "post",
                            url: "{:url('index/index')}",
                            data: {
                                RequestName: 'share',
                                something_id: self.shareToastData.id
                            },
                            headers: {
                                'X-Requested-With': 'XMLHttpRequest'
                            }
                        }).then(res => {
                            console.log(res)
                            if (res.data.code === 1) {
                                self.field.picturs.push(res.data.data.url)
                            }
                        })
                        self.$messagebox("已分享")
                    },
                    cancel: function (res) {
                        self.$messagebox('已取消');
                    },
                    fail: function (res) {
                        alert(JSON.stringify(res));
                    }
                });

            }
        }
    })
</script>